<template>
  <div>
    <van-nav-bar title="菜品详情" left-text="返回"  left-arrow @click-left="back" />

    <ul>
        <li v-for="item in data" :key="item.id">
        <img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt="">
        <div class="step">{{item.content}}</div>
        </li>
    </ul>
  </div>
</template>

<script>
import mixin from  "@/mixin/flag";
import {dishesdetail} from "./Service"
export default {
    data(){
        return{
            data:[],
            dishname:""
        }
    },
    mixins:[mixin],
    methods:{
        back(){
            this.$router.go(-1);
        },
    },
    async created(){
        let res= await dishesdetail({
            id:this.$route.params.id
        })
        console.log(res);
        this.dishname=res.data.data.name
        this.data = res.data.data.stepList
    }

}
</script>

<style lang="scss" scoped>
li{
    padding:20px;
    display: flex;
    img{
        width: 100px;
        height: 100px;
    }
    .step{
        flex:1;
        font-size:14px;
        padding-top:30px;
        margin-left: 15px;
    }
}

</style>